<template>
  <div class="drop-container" :style="styleObj">
    <div class="dropdown-more">
        <dl>
            <dt v-for="item in colList" :key="item.id">
                <a :href="item.href" target="_blank">{{item.text}}</a>
            </dt>
        </dl>
    </div>
  </div>
</template>

<script>
import { defineExpose, reactive, ref } from 'vue'
import props from './BaseConfig'
import { getPosition } from './BaseConfig'
export default {
   name: 'VmDropdownBar',
   props,
   setup (props) {
    const { top, left, right, bottom } = getPosition(props)
    const styleObj =  reactive({
        width: props.width,
        top,
        left,
        right,
        bottom
    })

    const show = ref(false) // 是否显示
    defineExpose({
        isShow: show
    })
    return { styleObj }
   }
}
</script>

<style lang="scss" scoped>
.drop-container {
    position: absolute;
    background: #fff;
    z-index: 9999999;
    .dropdown-more {
        padding: 6px 0 12px 0;
        text-align: center;
        line-height: 32px;
        font-size: 12px;
        a {
            color: #777;
            &:hover {
                color: #f00056;
            }
        }
    }
}
</style>>
